<template>
  <div class="w750">
    <div class="get-coupon-box">
      <div class="get-coupon">
        <div class="coupon-msg">
          <div class="shop-msg">
            <div class="s-img" v-if="couponIfo.couponPic"><img :src="$imgUrlHead + couponIfo.couponPic" alt=""></div>
            <span class="s-name">{{couponIfo.siteName}}</span>
          </div>
          <div class="coupon-name">{{couponIfo.couponName}}</div>
          <div class="coupon-range">
            {{couponIfo.fullPrice ? '满'+ couponIfo.fullPrice + '元可用' : '无门槛' }}
          </div>
          <div class="coupon-time">有效期：{{ couponIfo.getTime | dateformat('YYYY-MM-DD')}} 至 {{ couponIfo.endDate | dateformat('YYYY-MM-DD')}}</div>
          <div class="coupon-description">{{couponIfo.description}}</div>
        </div>
        <span class="coupon-btn" @click="GetCoupon">立即领取</span>
      </div>
    </div>
  </div>
</template>

<script>
  import { couponDetail , receive } from "api/coupon";
  export default {
    components: {

    },
    data() {
      return {
        couponId: '',
        couponIfo: '',
      };
    },

    watch: {

    },
    mounted() {
      let that = this

      this.couponId =  this.$route.query.couponId
      this.couponDetail()
    },

    methods: {
      //获取优惠券信息
      couponDetail() {
        let that = this;
        couponDetail({couponId: this.couponId}).then( res => {
          if(res.status == 1) {
            this.couponIfo = res.result
          }else {
            this.$toast(res.msg);
          }
        })
      },

      //领取优惠券
      GetCoupon() {
        this.$toast.loading({
          forbidClick: true,
          message: '加载中'
        })
        receive({couponId: this.couponId}).then(res => {
          if(res.status == 1) {
            this.$toast(res.result.msg)
            this.couponList = []
            this.loadRec(1);
          }else {
            this.$toast(res.msg)
          }
        })
        this.$toast.clear()
      }
    },
    computed: {
      
    }
  };
</script>


<style scoped>
  .get-coupon-box {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    max-width: 750px;
    margin: auto;
    background: #4eae31;
    z-index: 40;
    padding: 10px;
  }
  .get-coupon {
    position: absolute;
    top: 50%;
    left: 10px;
    right: 10px;
    transform: translateY(-50%);
    z-index: 50;
    width: auto;
    border-radius: 3px;
  }
  .get-coupon .coupon-msg {
    background: #fff;
    border-radius: 3px;
    margin-top: 40px;
    text-align: center;
    padding: 0 10px 10px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
  }
  .get-coupon .coupon-msg .shop-msg {
    position: relative;
    padding-top: 35px;
  }
  .get-coupon .coupon-msg .coupon-name {
    margin: 20px 0;
    font-size: 15px;
    font-weight: 600;
  }
  .get-coupon .coupon-msg .coupon-range {
    font-size: 12px;
  }
  .get-coupon .coupon-msg .coupon-time {
    font-size: 11px;
    margin-top: 5px;
  }
  .get-coupon .coupon-msg .coupon-description {
    margin-top: 15px;
    background: #f2f2f2;
    padding: 10px;
    border-radius: 3px;
    text-align: left;
    line-height: 20px;
    font-size: 12px;
    color: #999;
  }
  .get-coupon .coupon-msg .shop-msg .s-img {
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -25px;
  }
  .get-coupon .coupon-msg .shop-msg .s-name {
    display: block;
    color: #999;
    margin-top: 5px;
    font-size: 12px;
  }
  .get-coupon .coupon-msg .shop-msg .s-img img {
    width: 100%;
    height: 100%;
    display: block;
  }
  .get-coupon .coupon-btn {
    text-align: center;
    display: block;
    background: #fff;
    border-radius: 3px;
    height: 36px;
    line-height: 36px;
    margin: 20px 0;
    color: #e89006;
    font-size: 13px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
  }
</style>

